<template>
  <div>
    <p>
      选项式API：
      <br />
      1. 组件的data必须是函数，否则会导致所有实例共享一份数据
      <br />
      2. 组件的methods、computed和watch等选项必须在beforeCreate钩子之前定义
      <br />
      3. 组件的生命周期钩子必须在methods、computed和watch等选项之后定义
    </p>
    <h1>数字：{{ count }}+{{ message }}</h1>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>
</template>
<script>
export default {
  name: "A20",
  data() {
    return {
      count: 0,
      message: "Hello World"
    };
  },
  methods: {
    add() {
      this.count++;
    },
    sub() {
      this.count--;
    }
  }
};
</script>
<style></style>
